<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}
  <style>
    #img {
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="x-body">
    <xblock>
      <button class="layui-btn layui-btn-danger" onclick="back()">
        返回
      </button>
    </xblock>

    <div class="layui-form layui-form-pane layui-tab-item layui-show">
      <form method="post" enctype="multipart/form-data">

        <!-- 邮箱 -->
        <div class="layui-form-item">
          <label for="L_email" class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" id="L_email" name="email" required lay-verify="email" autocomplete="off"
              value="{$userInfo['email']}" class="layui-input">
            <span id="email_txt" style="line-height: 38px;"></span>
          </div>
        </div>

        <!-- 昵称 -->
        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">昵称</label>
          <div class="layui-input-inline">
            <input type="text" id="L_username" name="nickname" required lay-verify="required" autocomplete="off"
              value="{$userInfo['nickname']}" class="layui-input">
          </div>
          <span id="nickname_txt" style="line-height: 38px;"></span>
        </div>

        <!-- 性别 -->
        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">性别</label>
          <div class="layui-inline">
            <div class="layui-input-inline" style="width: 300px;">
              <input type="radio" name="sex" value="0" {$userInfo['sex']=='0' ? 'checked' : '' } title="保密">
              <input type="radio" name="sex" value="1" {$userInfo['sex']=='1' ? 'checked' : '' } title="男">
              <input type="radio" name="sex" value="2" {$userInfo['sex']=='2' ? 'checked' : '' } title="女">
            </div>
          </div>
        </div>

        <!-- 地址 -->
        <div class="layui-form-item">
          <label for="L_city" class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <select name="province" id="province" lay-filter="province" lay-verify="required">
              <option value="">请选择省</option>
              {foreach $province as $item}
              <option {$userInfo.province==$item.code ? "selected" :""} value="{$item.code}">{$item.name}
              </option>
              {/foreach}
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="city" id="city" lay-filter="city" lay-verify="required">
              <option value="">请选择市</option>
              {foreach $city as $item}
              <option {$userInfo.city==$item.code ? "selected" :""} value="{$item.code}">{$item.name}</option>
              {/foreach}
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="district" id="district" lay-filter="district" lay-verify="required">
              <option value="">请选择区</option>
              {foreach $district as $item}
              <option {$userInfo.district==$item.code ? "selected" :""} value="{$item.code}">{$item.name}
              </option>
              {/foreach}
            </select>
          </div>
        </div>

        <!-- 积分 -->
        <div class="layui-form-item">
          <label for="L_point" class="layui-form-label">积分</label>
          <div class="layui-input-inline">
            <input type="text" id="L_point" name="point" required lay-verify="required" autocomplete="off"
              value="{$userInfo['point']}" class="layui-input">
          </div>
          <span id="point_txt" style="line-height: 38px;"></span>
        </div>

        <!-- vip -->
        <div class="layui-form-item">
          <label for="L_vip" class="layui-form-label">VIP</label>
          <div class="layui-input-inline">
            <input type="text" id="L_vip" name="vip" required lay-verify="required" autocomplete="off"
              value="{$userInfo['vip']}" class="layui-input">
          </div>
          <span id="vip_txt" style="line-height: 38px;"></span>
        </div>

        <!-- 认证 -->
        <div class="layui-form-item">
          <label for="L_auth" class="layui-form-label">认证/未认证</label>
          <div class="layui-inline">
            <div class="layui-input-inline" style="width: 300px;">
              <input type="radio" name="auth" value="0" {$userInfo['auth']=='0' ? 'checked' : '' } title="未认证">
              <input type="radio" name="auth" value="1" {$userInfo['auth']=='1' ? 'checked' : '' } title="认证">
            </div>
          </div>
        </div>

        <!-- 留言 -->
        <div class="layui-form-item layui-form-text">
          <label for="L_sign" class="layui-form-label">签名</label>
          <div class="layui-input-block">
            <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="content" autocomplete="off" class="layui-textarea"
              style="height: 80px;">{$userInfo['content']}</textarea>
          </div>
        </div>

        <!-- 头像 -->
        <div class="layui-form-item">
          <div class="avatar-add">
            <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
            <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
              <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
            <input type="file" id="avatar" name="avatar" hidden>
            <img id="img" src="/{$userInfo['avatar']}">
            <span class="loading"></span>
          </div>
        </div>

        <!-- 封面 -->
        <div class="layui-form-item">
          <div class="avatar-add">
            <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
            <button type="button" class="layui-btn upload-img" onclick="cover.click()">
              <i class="layui-icon">&#xe67c;</i>上传封面
            </button>
            <input type="file" id="cover" name="cover" hidden>
            <img style="border-radius: 0px;left: 26%;top: 50%;width: 343px;height: 205px;" id="coverimg"
              src="/{$userInfo['cover']}">
            <span class="loading"></span>
          </div>
        </div>

        <!-- 确认按钮 -->
        <div class="layui-form-item">
          <button class="layui-btn" id="editbtn" key="set-mine" type="submit">确认修改</button>
        </div>

      </form>
    </div>

  </div>
</body>

<script>
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    console.log(url);
    return url;
  }

  function back() {
    window.location.href = "{:url('admin/user/index')}"
  }

  layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery

    //给省份绑定事件
    form.on('select(province)', function (data) {
      var province = data.value
      console.log(data);
      //异步请求
      $.ajax({
        type: 'POST',
        url: `{:url('admin/user/area')}`,
        data: `code=${province}`,
        dataType: 'json',
        success: function (data) {
          console.log(data)
          var output = '<option value="">请选择市</option>'
          for (var city of data) {
            output += `<option value="${city.code}">${city.name}</option>`
          }
          $("#city").html(output)
          $("#district").html(`<option value="">请选择县/区</option>`)
          //用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    //给市绑定事件
    form.on('select(city)', function (data) {
      var city = data.value
      $.ajax({
        type: 'POST',
        //异步请求
        url: `{:url('admin/user/areadistrict')}`,
        data: `code=${city}`,
        dataType: 'json',
        success: function (data) {
          console.log(data)
          var output = '<option value="">请选择区</option>'
          for (var city of data) {
            output += `<option value="${city.code}">${city.name}</option>`
          }
          $("#district").html(output)
          //用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    // 头像预览图
    $("#avatar").on("change", function () {

      // 获取当前文件路径
      var url = getObjectURL(this.files[0]);
      console.log(url);
      // 将路径放入img标签, 展示预览图
      if (url) {
        $("#img").attr('src', url);
      }

    })

    // 封面预览图
    $("#cover").on("change", function () {

      // 获取当前文件路径
      var url = getObjectURL(this.files[0]);
      console.log(url);
      // 将路径放入img标签, 展示预览图
      if (url) {
        $("#coverimg").attr('src', url);
      }

    })


    // 检查昵称是否重复
    $("#L_username").on("change", function () {
      var username = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('admin/user/check')}`,
        data: {
          nickname: username,
          userid: `{$userId}`
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#nickname_txt").html(data["msg"]).css({
              color: "green",
            });
            $("#editbtn").attr("disabled", false);
          } else {
            $("#nickname_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#editbtn").attr("disabled", true);
          }
        }
      })
    })

    // 检查邮箱是否重复
    $("#L_email").on("change", function () {
      var email = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('admin/user/check')}`,
        data: {
          email: email,
          userid: `{$userId}`
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#email_txt").html(data["msg"]).css({
              color: "green",
            });
            $("#editbtn").attr("disabled", false);
          } else {
            $("#email_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#editbtn").attr("disabled", true);
          }
        }
      })
    })




  })
</script>

</html>